<template>
  <div>
    <scroller style="top: 0.88rem;">
      <div>
        <!-- <h2 class="hh2">{{headerTitle}}</h2> -->
        <span class="titleSp">
          <b>{{suggestTitle}}</b>
        </span>
        <div class="raterList">
          <Rater
            v-for="(item, index) of sendLists"
            :key="index"
            :raterTitle="item"
            :raterSort="index + 1"
            :isRateShow="false"
            :raterCurrent="0"
            :sortNum="index"
            @sort="getSort"
          ></Rater>
        </div>
        <div style="width: 7.5rem;height:4.5rem;"></div>
      </div>
    </scroller>
    <div class="footer">
      <!-- <div class="bottom"> -->
      <!-- <button class="btn createNew cre2" @click="submitScore">确认提交</button> -->
      <!-- <div class="btn-box"> -->
      <sumbitBtn message="下一步" @btnClick="submitScore"></sumbitBtn>
      <!-- </div> -->

      <!-- </div> -->
    </div>

    <div style="width: 7.5rem;height: 2.5rem;"></div>
  </div>
</template>

<script>
import Rater from "~/components/Rater";
import { saveSingle } from "~/api/volunteer";
import sumbitBtn from "../pages/chooseCourse/components/sumbitBtn";
import ls from "store2";
export default {
  name: "raterList",
  components: {
    Rater,

    sumbitBtn
  },
  props: {
    suggestTitle: {
      type: String,
      default: ""
    },
    sendLists: {
      type: Array,
      default: null
    }
  },
  created() {
    this.types = this.$route.query.type * 1;
    this.isSix = sessionStorage.getItem("chooseSubject") * 1;
  },

  data() {
    return {
      isSix: true, //六选三
      rate_1: 1,
      rate_2: 1,
      rate_3: 1,
      rate_4: 1,
      rate_5: 1,
      rate_6: 1,
      rate_7: 1,
      flagCount: 0
    };
  },
  methods: {
    //   测试分类 1、学习成绩测试 2、学习兴趣测试  3、师资水平测试 4、对老师好感度 5、老师推荐科目 6、家长推荐科目 7、同学排除科目
    goNext() {},
    getSort(data) {
      if (data.No == 1) {
        this.rate_1 = data.sort;
      } else if (data.No == 2) {
        this.rate_2 = data.sort;
      } else if (data.No == 3) {
        this.rate_3 = data.sort;
      } else if (data.No == 4) {
        this.rate_4 = data.sort;
      } else if (data.No == 5) {
        this.rate_5 = data.sort;
      } else if (data.No == 6) {
        this.rate_6 = data.sort;
      } else {
        this.rate_7 = data.sort;
      }
    },
    saveSingle(data) {
      this.flagCount += 1;
      let obj = {
        userType: ls.get("userType"),
        type: 1,
        classify: this.types,
        parameter: data
      };
      if (this.flagCount == 1) {
        saveSingle(obj)
          .then(res => {
            if (res.code === "0") {
              this.$vux.toast.text(res.message);
              setTimeout(() => {
                this.$router.back();
              }, 20);
            }
          })
          .catch(error => {
            this.flagCount == 0
            this.$vux.toast.text(error);
          });
      }
    },
    submitScore() {
      let params = {};
      if (this.isSix) {
        params = {
          rate1: this.rate_1,
          rate2: this.rate_2,
          rate3: this.rate_3,
          rate4: this.rate_4,
          rate5: this.rate_5,
          rate6: this.rate_6
        };
      } else {
        params = {
          rate1: this.rate_1,
          rate2: this.rate_2,
          rate3: this.rate_3,
          rate4: this.rate_4,
          rate5: this.rate_5,
          rate6: this.rate_6,
          rate7: this.rate_7
        };
      }
      let paramss = JSON.stringify(params);
      this.saveSingle(paramss);
    }
  }
};
</script>

<style lang="less" scoped>
.hh2 {
  font-size: 0.44rem;
  font-weight: bold;
  color: rgba(34, 34, 34, 1);
  line-height: 0.44rem;
  text-align: left;
  padding: 0 0.3rem;
  box-sizing: border-box;
}

.titleSp {
  display: block;
  margin: 0.5rem auto 0.3rem;
  width: 6.9rem;
  height: 0.8rem;
  background: rgba(255, 241, 184, 1);
  border-radius: 0.1rem;
  padding-left: 0.2rem;
  box-sizing: border-box;
  line-height: 0.8rem;

  b {
    font-size: 0.24rem;
    font-weight: 600;
    color: rgba(34, 34, 34, 1);
  }
}
.footer {
  width: 7.5rem;
  height: 1.2rem;
  background: #fff;
  box-shadow: 0px -4px 10px 0px rgba(204, 204, 204, 0.2);
  padding: 0 0.3rem;
  position: fixed;
  padding-top: 0.1rem;
  bottom: 0;
  left: 0;
}
</style>
